.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60rpx;

  .loading {
    margin-top: 30rpx;
    color: #b872da;
    font-size: 24rpx;
  }

  .container {
    display: flex;
    justify-content: space-between;
    width: 1.5em;

    text {
      width: 0.2em;
      height: 0.7em;
      background-color: #b872da;
    }

    text:nth-of-type(1) {
      animation: grow 1s -0.45s ease-in-out infinite;
    }

    text:nth-of-type(2) {
      animation: grow 1s -0.3s ease-in-out infinite;
    }

    text:nth-of-type(3) {
      animation: grow 1s -0.15s ease-in-out infinite;
    }

    text:nth-of-type(4) {
      animation: grow 1s ease-in-out infinite;
    }

    @keyframes grow {
      0%,
      100% {
        transform: scaleY(1);
      }

      50% {
        transform: scaleY(2);
      }
    }
  }
}
